import React, { Component } from 'react'
import Foolter from './Foolter';

import "./Todo.scss"

export default class Center extends Component {
    constructor(props) {
        super(props)
        this.inputDom = React.createRef()
        this.state = {
            list: [
                // { id: 1, name: '张晓雪', checked: false },
                // { id: 2, name: '张晓雪1', checked: false },
                // { id: 3, name: '张晓雪2', checked: true }
            ],
            checked: false,
            // arr: []
        }
    }
    getList = () => {
        let lists = JSON.parse(localStorage.getItem('todo')) || []
        this.setState({
            list: lists,
        })
    }
    componentDidMount() {
        this.getList()
    }
    static getDerivedStateFromProps(Props, State) {
        console.log('旧数据', Props, State);
        return {
            Todolength: State.list.filter(item => !item.checked).length
        }
    }

    // 添加todo
    add = () => {
        console.log(this.inputDom.current.value);
        let { list } = this.state
        if (this.inputDom.current.value === '') {
            alert('输入内容不能为空~')
        } else {
            const newlist = list
            newlist.unshift({ name: this.inputDom.current.value, checked: false })
            this.inputDom.current.value = ''
            this.setState({
                list: newlist,
                arr: newlist.filter(item => !item.checked)
            }, () => {
                console.log(list);
                localStorage.setItem('todo', JSON.stringify(list))
            })
        }

    }
    // 删除todo
    del = (index) => {
        let { list } = this.state
        list.splice(index, 1)
        this.setState({
            list: list
        }, () => {
            localStorage.setItem('todo', JSON.stringify(list))
        })
    }

    // 选中
    updateChange = (e) => {
        let { list } = this.state
        list[e].checked = !list[e].checked
        this.setState({
            list: list,
            checked: list.every(item => item.checked),
            arr: list.filter(item => !item.checked)
        }, () => {
            // console.log(this.state.list, 'eee');
            localStorage.setItem('todo', JSON.stringify(list))
        })
    }
    // 清除已完成的状态
    childClearCompleted = () => {
        let newArrs = JSON.parse(localStorage.getItem('todo'))
        let newarr = newArrs.filter(item => {
            return !item.checked
        })
        this.setState({
            list: newarr,
        }, () => {
            localStorage.setItem('todo', JSON.stringify(newarr))
        })
    }

    // 全部
    All = () => {
        let lists = JSON.parse(localStorage.getItem('todo'))
        this.setState({
            list: lists
        })
    }
    // 已读 
    yidu = () => {
        let aa = JSON.parse(localStorage.getItem('todo'))
        let yidu = aa.filter(item => {
            return item.checked
        })
        this.setState({
            list: yidu,
        })
        // localStorage.setItem('todo', JSON.stringify(list))
    }
    // 未读只能在全部点击
    weidu = () => {
        let aa = JSON.parse(localStorage.getItem('todo'))
        let weidu = aa.filter(item => {
            return !item.checked
        })
        this.setState({
            list: weidu,
        })
    }
    render() {
        let { list } = this.state
        return (
            <div className='centerbox'>
                <input type="text" name="" id="" ref={this.inputDom} placeholder='请输入···' className='shuru' />
                <button type="submit" className='sub' onClick={this.add}>Submit</button>
                {/* 渲染list */}
                <div className='uls'>
                    <ul>
                        {
                            list.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <input type="checkbox" name="" id="" value='' checked={item.checked} onChange={() => { this.updateChange(index) }} readOnly />
                                        {item.name}
                                        <button className='buttonss' onClick={() => { this.del(index) }}>X</button>
                                    </li>
                                )
                            })
                        }
                    </ul>

                </div>
                <div className='appheader'>
                    <Foolter list={list}
                        //  tab={this.state.tab} 
                        childClearCompleted={this.childClearCompleted}
                        // childActive={this.childActive}
                        All={this.All}
                        yidu={this.yidu}
                        // arr={this.state.arr}
                        weidu={this.weidu}
                        Todolength={this.state.Todolength}
                    >

                    </Foolter>
                </div>
            </div>
        )
    }
}
